<!--
 * @Description: 权限管理
 * @Autor: zhangzhanhua
 * @Date: 2021-11-16 15:15:01
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-11-25 16:49:27
-->
<template>
    <div class="exAuthority">
        <div class="searchTop">
            <div class="topContent">
                <div class="searchContent">
                    <el-input class="others" size="mini" v-model="searchForm.authoritycode" placeholder="权限编码" clearable></el-input>
                </div>
                <div class="searchContent">
                    <el-input class="others" size="mini" v-model="searchForm.authorityname" placeholder="权限名称" clearable></el-input>
                </div>
                <div class="searchContent">
                    <el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="getTableList()">查询</el-button>
                    <el-button icon="el-icon-refresh-right" size="mini" @click='reload'>重置
                    </el-button>
                </div>
            </div>
            <div class="leftIcon">
                <el-tooltip class="item" effect="dark" content="新增" placement="top" v-if="menuArr.includes('新增')">
                    <el-button class="editBtn" icon="el-icon-plus" size="mini" @click="manage('add')">

                    </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="menuArr.includes('编辑')">
                    <el-button size="mini" icon="el-icon-edit-outline" class="editBtn" @click="manage('edit')" :disabled='!rowId'>

                    </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="menuArr.includes('删除')">
                    <el-button size="mini" icon="el-icon-delete" class="deleteBtn" @click="manage('delete')" :disabled='!rowId'>
                    </el-button>
                </el-tooltip>
            </div>
        </div>
        <div class="tableContent">
            <BaseTable :loading="isLoading" :data="tableList" :tableHeight="height" :columns="columns" :pagination="queryall" @size-change="sizeChange" @current-change="pageChange" @details='getRowData'></BaseTable>
        </div>
        <el-drawer :title="type == 'add'?'新增权限信息':'编辑权限信息'" :visible.sync="managePageShow" direction="rtl" size="30%">
            <managePage :parentId='rowId' v-if="managePageShow" :close='close' :type='type'></managePage>
        </el-drawer>
    </div>
</template>

<script>
import BaseTable from "@/components/BaseTable/index"
import managePage from './subpage/managePage' //增改页面
export default {
    name: "exAuthority",
    components: {
        BaseTable,
        managePage
    },
    computed: {
        // 表格高度
        height: function () {
            return this.$store.state.tableHeight
        }
    },
    data() {
        return {
            isLoading: false, //表格loading
            rowId: '',//列表id
            searchForm: {
                authoritycode: '', //权限编码
                authorityname: '',//权限名称
            },
            // 分页数据
            queryall: {
                totalNum: 10,
                startpage: 1,
                pagesize: 15
            },
            // 表格数据
            tableList: [],
            // 表格colums
            columns: [
                {
                    prop: 'authorityCode',
                    label: '权限编码',
                },
                {
                    prop: 'authorityName',
                    label: '权限名称',
                },
                {
                    prop: 'remark',
                    label: '备注',
                },
                {
                    prop: 'createName',
                    label: '创建人',
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                },
                {
                    prop: 'updateName',
                    label: '更新人',
                },
                {
                    prop: 'updateTime',
                    label: '更新时间',
                },
            ],
            managePageShow: false,//是否展示新增或编辑
            type: '',//状态,新增或编辑
            menuArr:[],//权限列表
        };
    },
    async activated() {
        var menuArr = []
        var menuId = ""
        if (localStorage.getItem("menuArr")) {
            menuArr = JSON.parse(localStorage.getItem("menuArr"))
        }
        menuArr.map(item => {
            item.children.map(v => {
                if (window.location.href.includes(v.url)) {
                    menuId = v.id
                }
            })
        })

        if (menuId) {
            this.menuArr = []
            await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000, })
                .then(res => {
                    res.data.data.map(item => {
                        this.menuArr.push(item.resourceName)
                    })
                }).catch((error) => { })
        }
        if (this.$store.state.app.searchResouce == "menu") {
            //重置
            this.reload()
            //获取表格数据
            this.getTableListData()

        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        /**
         * @description: 获取一行数据
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getRowData(val) {
            this.rowId = val.id //赋值当前行id
        },
        /**
        * @description: 删除权限
        * @param {*}
        * @return {*}
        * @author: zhangzhanhua
        */
        delExAuthority() {
            let _this = this
            _this.$confirm('确认删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // _this.isLoading = true
                _this.$http.delete(`/${this.$ServiceName}/api/external/exauthority/${this.$version}/deletebyid`, {
                    params: {
                        id: this.rowId //当前行id
                    }
                }).then(res => {
                    // _this.isLoading = false
                    if (res.data.success) {
                        _this.$message.success(res.data.msg)
                        _this.getTableListData()
                    } else {
                        _this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {

            });

        },
        /**
         * @description: 关闭新增
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        close() {
            this.managePageShow = false
            this.getTableListData()
        },
        /**
         * @description: 关联增删改按钮
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        manage(type) {
            // 删除或编辑时需要选中状态
            if (type == 'edit' || type == 'delete') {
                console.log(this.rowId);
                if (!this.rowId) {
                    this.$message.error('请选择一条数据')
                    return
                }
            }
            this.type = type //状态
            if (type == 'add') { //新增打开弹窗
                this.managePageShow = true
            }
            if (type == 'edit') { //编辑打开弹窗
                this.managePageShow = true
            }
            if (type == 'delete') { //删除
                this.delExAuthority() //删除函数
            }
        },
        /**
       * @description: 页数改变
       * @param {*} val
       * @return {*}
       * @author: zhangzhanhua
       */
        sizeChange(val) {
            this.queryall.pagesize = val
            this.getTableListData()
        },
        /**
         * @description: 页码改变
         * @param {*} val
         * @return {*}
         * @author: zhangzhanhua
         */
        pageChange(val) {
            this.queryall.startpage = val
            this.getTableListData()
        },

        /**
         * @Author: gonghairun
         * @description: 重制
         * @param {*}
         * @return {*}
         */
        reload() {
            this.searchForm = {
                authoritycode: '', //权限编码
                authorityname: '',//权限名称
            }
            this.queryall = {
                totalNum: 10,
                startpage: 1,
                pagesize: 15
            }
        },

        /**
         * @description: 查询
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getTableList() {
            this.queryall.startpage = 1
            this.getTableListData()
        },


        /**
         * @Author: gonghairun
         * @description: 获取列表明细数据
         * @param {*}
         * @return {*}
         */
        getTableListData() {
            this.rowId = '' //重获数据时清空rowId
            this.isLoading = true
            let params = Object.assign(this.searchForm, this.queryall)
            delete params.totalNum
            this.$http.get(`/${this.$ServiceName}/api/external/exauthority/${this.$version}/listall`, { params: params }).then(res => {
                this.isLoading = false
                if (res.data.success) {
                    this.queryall.totalNum = res.data.data.totalNum
                    this.tableList = res.data.data.pages
                } else {
                    this.queryall.totalNum = 0
                    this.tableList = []
                }
            }).catch(err => { this.isLoading = false })
        },
    }
};
</script>

<style lang="less" scoped>
.exAuthority {
    width: 100%;
    height: 100%;
    /deep/.el-table__body td {
        border-right: none;
    }
    /deep/.el-table__footer-wrapper {
        margin-top: 10px;
    }
    /deep/ .el-drawer__body{
        background-color: #f5f7fa;
    }
     /deep/ .el-drawer__header{
        background-color: #f5f7fa;
        margin: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #eaeaea;
    }
    .searchTop {
        min-height: 50px;
        background-color: #f5f7fa;
        border-radius: 0px;
        font-size: 14px;
        color: #606266;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border: 1px solid #eaeaea;
        border-bottom: none;
        box-sizing: border-box;
        .topContent {
            width: 80%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            height: 50px;
        }
        .leftIcon {
            // width: 20%;
        }
        .heightLevel {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            z-index: 100;
            background: #f5f7f9;
            padding: 0 20px;
        }
        .searchContent {
            margin-right: 20px;
            .others {
                width: 153px;
            }
        }
    }
    .tableContent {
        width: 100%;
        height: calc(100% - 50px);
    }
}
</style>
